<template>
	<view class="container" style="padding:20rpx;">
		<view style="padding-bottom: 100rpx;">
			<view class="bg-white">
				<view class="section">
					<!-- store info begin -->
					<list-cell :hover="false">
						<view class="w-100 d-flex align-items-center">
							<view class="d-flex flex-column w-60">
								<!-- <view class="w-100 font-size-lg text-color-base text-truncate mb-10">{{ order.store.name }}</view> -->
								<view class="w-100 d-flex align-items-center overflow-hidden">
									<!-- <image src="/static/images/order/location.png" class="flex-shrink-0" style="width: 30rpx; height: 30rpx;"></image> -->
									<!-- <view class="text-truncate font-size-sm text-color-assist">{{ order.store.address }}</view> -->
								</view>
							</view>
							<view class="d-flex justify-content-end align-items-center w-40">
								<image src="/static/images/order/mobile.png" style="width: 60rpx; height: 60rpx;margin-right: 30rpx;" @click="callPhone(order.phone)"></image>
								<image src="/static/images/order/navigation.png" style="width: 60rpx; height: 60rpx;"  @click="getLocation(order.address)" v-if="order.orderType == 'takeout'"></image>
							</view>
						</view>
					</list-cell>
					<!-- store info end -->
					<!-- goods begin -->
					<list-cell :hover="false" padding="50rpx 30rpx">
						<view class="w-100 d-flex flex-column position-relative" style="margin-bottom: -40rpx;">
							<view class="w-100 d-flex align-items-center mb-40" v-for="(good, index) in order.goods" :key="index">
								<view class="d-flex flex-column w-60 overflow-hidden">
									<view class="font-size-lg text-color-base mb-10 text-truncate">{{ good.name }}</view>
									<view class="font-size-sm text-color-assist text-truncate">{{ good.property }}</view>
								</view>
								<view class="d-flex w-40 align-items-center justify-content-between pl-30">
									<view class="font-size-base text-color-base">x{{ good.number }}</view>
									<view class="font-size-base text-color-base font-weight-bold">￥{{ good.price }}</view>
								</view>
							</view>
						</view>
					</list-cell>
					<!-- goods end -->
				</view>
				<view class="section">
					<!-- payment and amount begin -->
					<list-cell :hover="false" padding="50rpx 30rpx">
						<view class="w-100 d-flex flex-column">
							<view class="pay-cell">
								<view>取单号</view>
								<view class="font-weight-bold">{{ order.order_number }}</view>
							</view>
							<view class="pay-cell">
								<view>订单号</view>
								<view class="font-weight-bold">{{ order.order_no }}</view>
							</view>
							<view class="pay-cell">
								<view>下单时间</view>
								<view class="font-weight-bold">{{order.created_at }}</view>
							</view>
							<view class="pay-cell">
								<view>金额总计</view>
								<view class="font-weight-bold">￥{{ order.amount }}</view>
							</view>
							<view class="pay-cell">
								<view>订单状态</view>
								<view class="font-weight-bold">{{ order.wx_status }}</view>
							</view>
						</view>
					</list-cell>
					<!-- payment and amount end -->
				</view>
				<!-- order other info begin -->
				<view class="section">
					<!-- order info begin -->
					<list-cell :hover="false" padding="50rpx 30rpx">
						<view class="w-100 d-flex flex-column">
							<view class="pay-cell" v-if="order.productioned_time">
								<view>完成制作时间</view>
								<view class="font-weight-bold">{{ order.productioned_time }}</view>
							</view>
							<view class="pay-cell" v-if="order.postscript">
								<view>备注</view>
								<view class="font-weight-bold">{{ order.postscript }}</view>
							</view>
						</view>
					</list-cell>
					<!-- order info end -->
				</view>
				<!-- order other info end -->
			</view>
			<view class="position-relative w-100">
				<image src="/static/images/order/bottom.png" mode="widthFix" class="w-100"></image>
				<view class="invote-box" v-if="!order.invoice_status">
					<!-- <view class="font-size-base text-color-primary" @tap="goToInvoice">去开发票</view> -->
					<!-- <image src="/static/images/order/right.png"></image> -->
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="item" v-if="order.status == 1"><button type="primary" @click="goOrder(order.id,'是否接单？')">接单</button></view>
			<view class="item" v-if="order.status == 1"><button type="warn" @click="goOrder(order.id,'是否退款？',1)">退款</button></view>
			<view class="item" v-if="order.status == 1"><button type="primary" @click="goOrder(order.id,'是否完成？',1,1)">一键完成</button></view>
			<view class="item" v-if="order.status == 2"><button type="primary" @click="goOrder(order.id,'开始配送？')">配送</button></view>
			<view class="item" v-if="order.status == 3"><button type="primary" @click="goOrder(order.id,'确认送达？')">送达</button></view>
			<view class="item" v-if="order.status == 4"><button type="primary" @click="goOrder(order.id,'确认完成？')">完成</button></view>
		</view>
	</view>
</template>

<script>
// import Orders from '@/api/orders';
import listCell from '@/components/list-cell/list-cell';
import {mapState,mapActions} from 'vuex'

export default {
	components: {
		listCell
	},
	data() {
		return {
			order: {},
			id:0
		};
	},
	computed: {
		...mapState(['store'])
	},
	onLoad({ id }) {
		if(id){
			this.id = id
		}
		// 查找订单
		// /user/orderOneAdmin
		this.$http.get('/user/orderOneAdmin', {params:{id:id}}).then(res => {
			// console.log(res)
			this.order = res.data.data
		}).catch(err => {
		
		})
		
	},
	async onShow(){
		this.getStore()
	},
	methods: {
		...mapActions(['getStore']),
		review() {
			const date = this.order.completed_time.split(' ')[0]
			uni.navigateTo({
				url: '/pages/review/review?storename=' + this.order.store.name + '&typeCate=' + this.order.typeCate + '&date=' + date
			})
		},
		goToInvoice() {
			uni.navigateTo({
				url: '/pages/invoice/invoice'
			})
		},
		getLocation(addresses) {
			console.log(1,addresses)
			if(!addresses){
				return uni.showToast({
					icon:'none',
					title:'无地址'
				})
			}
			uni.getLocation({
			    type: 'wgs84',
			    success: function (res) {
			    }
			});
			// console.log(1111,this.store.latitude,this.store.longitude)
			uni.getLocation({
			    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
			    success:(res)=> {
			        const latitude = addresses.latitude;
			        const longitude = addresses.longitude;
			        const name = addresses.accept_name;
			        const address = addresses.street;
			        uni.openLocation({
			            latitude:  Number(latitude),
			            longitude: Number(longitude),
						name:name,
						address:address,
						
			            success: function () {
			                console.log('success');
			            },
						complete:function(res){
							 console.log(res);
						}
			        });
			    }
			});
		},
		callPhone(phone){
			if(phone){
				uni.makePhoneCall({
				    phoneNumber: phone //仅为示例
				});
			}else{
				uni.showToast({
					icon:'none',
					title:'无手机号'
				})
			}
			
		},
		goOrder(id,msg,is_t=0,is_o=0){
			uni.showModal({
			    content: msg,
			    success:(res)=> {
			        if (res.confirm) {
			            this.$http.post('/user/upOrderOne', {id:id,is_t:is_t,is_o:is_o}).then(res => {
			            	// console.log(res)
			            	if(res.data.code == 1){
			            		uni.showToast({
			            			title:res.data.msg
			            		})
								this.$http.get('/user/orderOneAdmin', {params:{id:this.id}}).then(res => {
									// console.log(res)
									this.order = res.data.data
								}).catch(err => {
								
								})
			            	}else{
			            		uni.showToast({
			            			icon:'none',
			            			title:res.data.msg
			            		})
			            	}
			            }).catch(err => {
			            
			            })
			        } else if (res.cancel) {
			            // console.log('用户点击取消');
			        }
			    }
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@mixin arch {
	content: "";
	position: absolute;
	background-color: $bg-color;
	width: 30rpx;
	height: 30rpx;
	bottom: -15rpx;
	z-index: 10;
	border-radius: 100%;
}

.section {
	position: relative;
	
	&::before {
		@include arch;
		left: -15rpx;
	}
	
	&::after {
		@include arch;
		right: -15rpx;
	}
}

.pay-cell {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: $font-size-base;
	color: $text-color-base;
	margin-bottom: 40rpx;

	&:nth-last-child(1) {
		margin-bottom: 0;
	}
}

.invote-box {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	
	image {
		width: 30rpx;
		height: 30rpx;
	}
}

.btn-box {
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120rpx;
	box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	z-index: 11;
	
	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 10rpx;
		flex: 1;
		flex-shrink: 0;
		
		button {
			width: 100%;
			border-radius: 50rem !important;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
		}
	}
}
</style>
